<%@ page language="java" contentType="text/html; charset=utf-8"
	pageEncoding="utf-8"%>
<%@taglib prefix="s" uri="/struts-tags"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>预约管理</title>
<link rel="stylesheet"
	href="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
<script
	src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/admin/qf/bootstrap-3.3.7-dist/css/bootstrap.min.css" />
<link rel="stylesheet"
	href="${pageContext.request.contextPath }/admin/qf/css/chax.css" />
</head>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/admin/qf/js/jquery-1.7.2.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/admin/qf/bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>
<script type="text/javascript"
	src="${pageContext.request.contextPath }/admin/qf/js/chaxStu.js"></script>
<body>
	<hr>
	<b>&nbsp;&nbsp;内容列表</b>
	<hr>
	<!--添加学生列表-->
	<div>
		<form action="findAppointment" method="post" id="fsub">
			<input type="text" name="yname" class="tex" placeholder="请输入搜索关键字" />
			<input type="hidden" id="pageNo" name="pageNo" />
			<button class="but2">
				<font>搜索</font>
			</button>
			&nbsp;&nbsp;
		</form>
		&nbsp;&nbsp;
	</div>
	<hr />

	<table class="table table-hover">
		<thead>
			<tr>
				<th>预约编号</th>
				<th>客户姓名</th>
				<th>客户性别</th>
				<th>预约时间</th>
				<th>汽车牌号</th>
				<th>手机号码</th>
				<th>服务类型</th>
				<th>汽车类型</th>
				<th>操作</th>
			</tr>
		</thead>
		<tbody>
			<s:iterator value="#request.app.list">
				<tr>
					<td>${appointmentId}</td>
					<td>${appointmentName}</td>
					<td>${appointmentSex}</td>
					<td>${appointmentTime}</td>
					<td>${appointmentPaih}</td>
					<td>${appointmentPhone}</td>
					<td>${bservice.bserviceName}</td>
					<td>${car.cname}</td>
					<td>
						<div class="btn-group">
							<button type="button" data-toggle="modal" data-target="#myModal"
								class="btn btn-default"
								style="border: 1px solid #31B0D5; color: #31B0D5;">修改</button>
							<a href="deleteAppointment?appointmentId=${appointmentId}"><button
									type="button" class="btn btn-default"
									style="border: 1px solid #D43F3A; color: #D43F3A;">删除</button></a>
						</div>
					</td>
				</tr>
			</s:iterator>
			<tr>
				<td colspan="9">当前是第${pageNo}页，共${sumPage}页</td>
			</tr>
		</tbody>
	</table>
	<div class="btn-group" style="margin-left: 350px">
		<a href="javascript:pageModel(${pm.index})"><button type="button"
				id="start" class="btn btn-default">首页</button></a> <a
			href="javascript:pageModel(${pm.prev})"><button type="button"
				id="pageS" class="btn btn-default">上一页</button></a> <a
			href="javascript:pageModel(${pm.next})"><button type="button"
				id="pageX" class="btn btn-default">下一页</button></a> <a
			href="javascript:pageModel(${pm.sumPage})"><button type="button"
				id="end" class="btn btn-default">尾页</button></a>
	</div>
	<script type="text/javascript">
		function pageModel(pageNo) {
			$("#pageNo").val(pageNo);
			$("#fsub").submit();
		}
	</script>

	<!-- 模态框（Modal） -->
	<div class="modal fade" id="myModal" tabindex="-1" role="dialog"
		aria-labelledby="myModalLabel" aria-hidden="true">
		<div class="modal-dialog">
			<div class="modal-content">
				<div class="modal-header">
					<button type="button" class="close" data-dismiss="modal"
						aria-hidden="true">×</button>
					<h4 class="modal-title" id="myModalLabel">修改信息</h4>
				</div>
				<form
					action="${pageContext.request.contextPath }/updateAppointment" method="post">
					<div class="modal-body">
						<table
							style="border-collapse: separate; border-spacing: 0px 20px;">

							<tr align="right">
								<td>预约编号：</td>
								<td style="padding-right: 50px"><input type="text" id="aid"
									name="appointmentId" class="tt" /></td>
								<td>客户姓名：</td>
								<td align="left"><input type="text" id="aname"
									name="appointmentName" /></td>
							</tr>
							<tr align="right">
								<td>客户性别：</td>
								<td align="left"><input type="text" id="asex"
									name="appointmentSex" /></td>
								<td>预约时间：</td>
								<td align="left"><input type="date" id="atime"
									name="appointmentTime" /></td>
							</tr>
							<tr align="right">
								<td>汽车牌号：</td>
								<td align="left"><input type="text" id="ahao"
									name="appointmentPaih" /></td>
								<td>手机号码：</td>
								<td align="left"><input type="text" id="aphone"
									name="appointmentPhone" /></td>
							</tr>
							<tr align="right">
								<td>服务类型：</td>
								<td align="left"><select id="select2" name="bservice.bserviceId">
										<option>--请选择服务--</option>
								</select></td>
								<td>汽车类型：</td>
								<td align="left"><select id="select1" name="car.cid"><option>--请选择汽车--</option></select></td>
							</tr>

						</table>

					</div>
					<div class="modal-footer">
						<button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
						<input type="submit" class="btn btn-primary" value="修改">
					</div>
				</form>
			</div>
			<!-- /.modal-content -->
		</div>
		<!-- /.modal-dialog -->
	</div>
	<!-- /.modal -->

	<script>
		$(function() {
			$('#myModal').on('show.bs.modal', function(event) {
				var btnThis = $(event.relatedTarget); //触发事件的按钮
				var modal = $(this); //当前模态框
				var modalId = btnThis.data('id'); //解析出data-id的内容 
				var content = btnThis.closest('tr').find('td').eq(0).text();
				modal.find('#aid').val(content);
				var content = btnThis.closest('tr').find('td').eq(1).text();
				modal.find('#aname').val(content);
				var content = btnThis.closest('tr').find('td').eq(2).text();
				modal.find('#asex').val(content);
				var content = btnThis.closest('tr').find('td').eq(3).text();
				modal.find('#atime').val(content);
				var content = btnThis.closest('tr').find('td').eq(4).text();
				modal.find('#ahao').val(content);
				var content = btnThis.closest('tr').find('td').eq(5).text();
				modal.find('#aphone').val(content);
				var content = btnThis.closest('tr').find('td').eq(6).text();
				fun();
				fan();
			})
		});
	</script>
	<script type="text/javascript">
		function fun() {
			$.ajax({
				dataType : "json",
				type : "post",
				url : "${pageContext.request.contextPath }/findCar",
				dataType : 'json',
				success : function(msg) {
					var len = msg.length;
					for (var i = 0; i <= len; i++) {
						$("#select1").append(
								"<option value='"+msg[i].cid+"'>"
										+ msg[i].cname + "</option>");
					}
				}
			});
		}
		function fan() {
			$.ajax({
				dataType : "json",
				type : "post",
				url : "${pageContext.request.contextPath }/findBservice",
				dataType : 'json',
				success : function(msg) {
					var len = msg.length;
					for (var i = 0; i <= len; i++) {
						$("#select2").append(
								"<option value='"+msg[i].bserviceId+"'>"
										+ msg[i].bserviceName + "</option>");
					}
				}
			});
		}
	</script>


	<script src="https://cdn.staticfile.org/jquery/2.1.1/jquery.min.js"></script>
	<script
		src="https://cdn.staticfile.org/twitter-bootstrap/3.3.7/js/bootstrap.min.js"></script>

</body>

</html>